<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>AUI快速完成布局</title>
		<link rel="stylesheet" type="text/css" href="../../css/w3.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
		<style type="text/css">
			body {
				background: #f0f0f0;
			}
			.bg-dark {
				background: #333333 !important;
			}
			.aui-bar-btn-item {
				background: #ffffff;
				border: none;
				border-bottom: 2px solid #ffffff;
			}
			.aui-bar-btn-item.aui-active {
				color: #039be5;
				background: #ffffff;
				border-bottom: 2px solid #039be5;
			}
			.nomore-tag {
				margin: 0 auto;
				text-align: center;
				width: auto;
				color: #333;
				padding: 20px 10px 10px 10px;
				font-size: 15px;
			}
			.title-bar {
				margin: 0 auto;
				text-align: left;
				width: auto;
				color: #333;
				background-color: #D7D7D7;
				padding: 3px 3px 2px 15px;
				font-size: 15px;
			}
			.aui-btn-danger {
				background-color: #BC3603 !important;
			}
			.aui-btn-warning {
				background-color: #D97904 !important;
			}
			.aui-btn-default {
				color: #ffffff !important;
				background-color: #F2B705 !important;
			}
			.aui-btn-success {
				background-color: #86AD00 !important;
			}
			.aui-btn-primary {
				background-color: #0092B9 !important;
			}
			#labels ul, #percentage ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				font-size: 14px;
				color: #333333;
			}
			#labels li, #percentage li {
				display: block;
				margin: 0;
				padding: 0 0 8px 0;
			}
			#labels span {
				display: block;
				float: left;
				width: 8px;
				height: 8px;
				margin: 5px 5px 0 0;
				background: #FFFFFF;
			}
			#labels ul :nth-child(1) span {
				background: #BC3603;
			}
			#labels ul :nth-child(2) span {
				background: #F2B705;
			}
			#labels ul :nth-child(3) span {
				background: #86AD00;
			}
			#labels ul :nth-child(4) span {
				background: #0092B9;
			}
			#labels ul :nth-child(5) span {
				background: #D97904;
			}
			.text-overflow {
				display: block;/*内联对象需加*/
				word-break: keep-all;/* 不换行 */
				white-space: nowrap;/* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。不换行 */
				overflow: hidden;/* 内容超出宽度时隐藏超出部分的内容 */
				text-overflow: ellipsis;/* IE 专有属性，当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
			}
			.fast_icon {
				width: 60px;
				height: 60px;
				background: center;
			}
			.quote_icon {
				width: 15px;
				height: 15px;
				background: center;
			}
		</style>
	</head>
	<body>
		<div class="aui-content">
			<div class="title-bar">
				财务数据录入
			</div>
		</div>
		<section class="aui-grid">
			<div class="aui-row ">
				<div class="aui-col-xs-4 aui-padded-t-15 aui-padded-b-10"  tapmode onclick="ManageLoanData()">
					<img class="fast_icon" src="../../image/main_frm_3/input2.png"></img>
					<div class="aui-grid-label">
						贷款录入
					</div>
				</div>
				<div class="aui-col-xs-4 aui-padded-t-15 aui-padded-b-10" tapmode onclick="ManageConsumptionData()">
					<img class="fast_icon" src="../../image/main_frm_3/input1.png"></img>
					<div class="aui-grid-label">
						支出录入
					</div>
				</div>
				<div class="aui-col-xs-4 aui-padded-t-15 aui-padded-b-10" tapmode onclick="ManageIncomeData()">
					<img class="fast_icon" src="../../image/main_frm_3/input3.png"></img>
					<div class="aui-grid-label">
						收入录入
					</div>
				</div>
			</div>
			<div id="other_fee"style="width:100%; background-color:#fff; padding: 0rem 1rem 0.5rem 1rem">
				<img class="quote_icon" style="margin-right: 0.5rem; display:inline;" src="../../image/main_frm_3/left_quote.png"></img>
				<h6 style="width: 70%;display:inline;">为了更好的管理您的贷款以及财务状况，请尽量准确填写以上信息。^_^</h6>
				<img class="quote_icon" style="margin-left: 0.5rem; display:inline;" src="../../image/main_frm_3/right_quote.png"></img>
			</div>
		</section>
		<div class="aui-content">
			<div class="title-bar">
				还贷进度监控
			</div>
			<div id="totalLoan" style="background-color:#fff; padding-top:0.5rem">
				<div style="width:100%; background-color:#fff; padding: 0rem 0.5rem 1rem 1rem">
					<div style="width: 20%; display:inline-block">
						拍拍贷
					</div>
					<div style="width: 75%; display:inline-block; margin-left: 0rem">
						<div class="progressbar-container" style="width: 100%">
							<h6>总额：40000元 → 已还款20000元</h6>
							<div class="w3-round-xlarge" style="width: 100%; color:#000!important;background-color:#FCB603!important">
								<div id="Progress0" class="w3-container w3-round-xlarge" style="important;color:#fff!important;background-color:#BC3603!important;width:0%">
									0%
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="width:100%; background-color:#fff; padding: 0rem 0.5rem 1rem 1rem">
					<div style="width: 20%; display:inline-block">
						你我贷
					</div>
					<div style="width: 75%; display:inline-block; margin-left: 0rem">
						<div class="progressbar-container" style="width: 100%">
							<h6>总额：20000元 → 已还款6000元</h6>
							<div class="w3-round-xlarge" style="width: 100%; color:#000!important;background-color:#F8F005!important">
								<div id="Progress1" class="w3-container w3-round-xlarge" style="important;color:#fff!important;background-color:#F2B705!important;width:0%">
									0%
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="width:100%; background-color:#fff; padding: 0rem 0.5rem 1rem 1rem">
					<div style="width: 20%; display:inline-block">
						点融网
					</div>
					<div style="width: 75%; display:inline-block; margin-left: 0rem">
						<div class="progressbar-container" style="width: 100%">
							<h6>总额：10000元 → 已还款1000元</h6>
							<div class="w3-round-xlarge" style="width: 100%; color:#000!important;background-color:#D6ED00!important">
								<div id="Progress2" class="w3-container w3-round-xlarge" style="important;color:#fff!important;background-color:#86AD00!important;width:0%">
									0%
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="width:100%; background-color:#fff; padding: 0rem 0.5rem 1rem 1rem">
					<div style="width: 20%; display:inline-block">
						其他
					</div>
					<div style="width: 75%; display:inline-block; margin-left: 0rem">
						<div class="progressbar-container" style="width: 100%">
							<h6>总额：3000元 → 已还款2160元</h6>
							<div class="w3-round-xlarge" style="width: 100%; color:#000!important;background-color:#00D2F9!important">
								<div id="Progress3" class="w3-container w3-round-xlarge" style="important;color:#fff!important;background-color:#0092B9!important;width:0%">
									0%
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="pay_progresshint"style="width:100%; background-color:#fff; padding: 0rem 1rem 0.5rem 1rem">
					<img class="quote_icon" style="margin-right: 0.5rem; display:inline;" src="../../image/main_frm_3/left_quote.png"></img>
					<h6 style="width: 70%;display:inline;">还款进度根据您登记的贷款记录推算，准确前提是您按时还款。^_^</h6>
					<img class="quote_icon" style="margin-left: 0.5rem; display:inline;" src="../../image/main_frm_3/right_quote.png"></img>
				</div>
				<div style="padding:0rem 2rem 1rem 2rem; background-color: #fff">
					<div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" tapmode>
						显示我的全部贷款详情
					</div>
				</div>
			</div>
		</div>
		<div class="aui-content">
			<div class="title-bar">
				本月还贷情况
			</div>
			<div id="monthPay" style="background-color:#fff; padding-top:1.5rem">
				<div class="text-overflow" style="margin-left:58%!important; width:42%; background-color:#fff; height: 8.5rem">
					<h4 id="totalLoanMonth">本月还贷：4800 元</h4>
					<div id="labels" style="margin-top: 10px">
						<ul>
							<li>
								<span></span>拍拍贷 2000元
							</li>
							<li>
								<span></span>微车贷 1500元
							</li>
							<li>
								<span></span>点融网 500元
							</li>
							<li>
								<span></span>其他 800元
							</li>
						</ul>
					</div>
				</div>
				<div id="monthly_payhint"style="width:100%; background-color:#fff; padding: 0rem 1rem 0.5rem 1rem">
					<img class="quote_icon" style="margin-right: 0.5rem; display:inline;" src="../../image/main_frm_3/left_quote.png"></img>
					<h6 style="width: 70%;display:inline;">显示本月您需要还款最多的前三大贷款，剩余还款计于其他项中。</h6>
					<img class="quote_icon" style="margin-left: 0.5rem; display:inline;" src="../../image/main_frm_3/right_quote.png"></img>
				</div>
				<div style="padding:0rem 2rem 1rem 2rem; background-color: #fff">
					<div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" tapmode>
						显示本月全部还款详情
					</div>
				</div>
			</div>
		</div>
		<div class="aui-content">
			<div class="title-bar">
				我的财务分析
			</div>
			<div id="monthFixExp" style="background-color:#fff; padding-top:1rem">
				<div class="text-overflow" style="margin-left:58%!important; width:42%; background-color:#fff; height: 9rem">
					<h4 id="totalFixExp">固定支出：7500 元</h4>
					<div id="labels" style="margin-top: 10px">
						<ul>
							<li>
								<span></span>还贷 4800元
							</li>
							<li>
								<span></span>信用卡 1000元
							</li>
							<li>
								<span></span>蚂蚁账单 1000元
							</li>
							<li>
								<span></span>京东白条 200元
							</li>
							<li>
								<span></span>其他 500元
							</li>
						</ul>
					</div>
				</div>
				<div style="padding:0.5rem 2rem 0.5rem 2rem; background-color: #fff">
					<div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" tapmode>
						查看和编辑支出详情
					</div>
				</div>
			</div>
		</div>
		<div class="aui-content">
			<ul class="aui-list aui-form-list">
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label" style="width:35%">
							本月收入(元)：
						</div>
						<div class="aui-list-item-input" style="width:40%;">
							<input id="month_income" type="text" placeholder="请在此输入数字" value="">
						</div>
						<div class="aui-list-item-label" style="width:25%; font-size:0.65rem; color:#aaa">
							默认值为0
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label" style="width:35%">
							现金存款(元)：
						</div>
						<div class="aui-list-item-input" style="width:40%;">
							<input id="cash_saved" type="text" placeholder="请在此输入数字" value="">
						</div>
						<div class="aui-list-item-label" style="width:25%; font-size:0.65rem; color:#aaa">
							默认值为0
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label" style="width:35%">
							预计生活费(元)：
						</div>
						<div class="aui-list-item-input" style="width:40%;">
							<input id="life_budget" type="text" placeholder="请在此输入数字" value="">
						</div>
						<div class="aui-list-item-label" style="width:25%; font-size:0.65rem; color:#aaa;">
							默认值为0
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="aui-content">
			<div style="padding:0.5rem 2rem 0.5rem 2rem; background-color: #fff">
				<div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" tapmode onclick="calcFinance()">
					计算本月财务状况
				</div>
			</div>
			<div id="fin_result" style="padding:1rem 1rem 1rem 1rem;background-color:#fff; display: none">
				<h3>预计您本月将结余：</h3>
				<h1 id="fin_remain" style="background-color:#fff; font-size: 2rem;text-align: center;">0元</h1>
				<h3 id="fin_good" style="background-color:#fff; text-align: center; display: none">您的财务状况非常出色，有没有考虑适度贷款融资做投资呢？^_^</h3>
				<h3 id="fin_soso" style="background-color:#fff; text-align: center; display: none">您的财务状况偏紧，月底可能会捉襟见肘，是否考虑小额贷款以防急用？^_^</h3>
				<h3 id="fin_problem" style="background-color:#fff; text-align: center; display: none">您的财务状有些问题，需要及早为月底还款高峰做准备，考虑一下贷款周转？^_^</h3>
				<div style="padding:0.5rem 1rem 0.5rem 1rem; background-color: #fff">
					<div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" tapmode onclick="openLoanListFrame()">
						看看哪些贷款项目适合您
					</div>
				</div>
			</div>
			<div id="fin_result" style="padding:1rem 1rem 1rem 1rem;background-color:#fff; height:3rem;"></div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/aui-tab.js" ></script>
	<script>
		var loanTotalID;
		var monthPayID;
		function showPayProgress() {
			var elem = [0, 0, 0, 0];
			var progress = [50, 30, 10, 72];
			for (var i = 0; i < 4; i++) {
				var barName = "#Progress" + i;
				elem[i] = document.querySelector(barName);
			}
			var width = 0;
			var id = setInterval(frame, 20);
			function frame() {
				if (width >= 100) {
					clearInterval(id);
				} else {
					width++;
					for (var i = 0; i < 4; i++) {
						if (progress[i] >= width) {
							elem[i].style.width = width + '%';
							elem[i].innerHTML = width * 1 + '%';
						}
					}
				}
			}

		}

		function ManageLoanData() {
			var delay = 0;
			if (api.systemType != 'ios') {
				delay = 300;
			}
			api.openWin({
				name : 'loan_manage_win',
				url : './loan_manage_win.html',
				bounces : false,
				delay : delay,
				slidBackEnabled : true,
				vScrollBarEnabled : false,
				animation : {
					type : "movein", //动画类型（详见动画类型常量）
					subType : "from_left", //动画子类型（详见动画子类型常量）
					duration : delay //动画过渡时间，默认300毫秒
				}
			});
		}

		function ManageConsumptionData() {
			var delay = 0;
			if (api.systemType != 'ios') {
				delay = 300;
			}
			api.openWin({
				name : 'consum_manage_win',
				url : './consum_manage_win.html',
				bounces : false,
				delay : delay,
				slidBackEnabled : true,
				vScrollBarEnabled : false,
				animation : {
					type : "movein", //动画类型（详见动画类型常量）
					subType : "from_left", //动画子类型（详见动画子类型常量）
					duration : delay //动画过渡时间，默认300毫秒
				}
			});
		}

		function ManageIncomeData() {
			var delay = 0;
			if (api.systemType != 'ios') {
				delay = 300;
			}
			api.openWin({
				name : 'income_manage_win',
				url : './income_manage_win.html',
				bounces : false,
				delay : delay,
				slidBackEnabled : true,
				vScrollBarEnabled : false,
				animation : {
					type : "movein", //动画类型（详见动画类型常量）
					subType : "from_left", //动画子类型（详见动画子类型常量）
					duration : delay //动画过渡时间，默认300毫秒
				}
			});
		}

		function openLoanListFrame() {
			api.sendEvent({
				name : 'ev_openLoanListFrame',
			});
		}

		function loadPieChart() {
			var pieChart = api.require('pieChart');
			pieChart.reloadData({
				id : loanTotalID,
				elements : [{
					value : loanCount,
					color : '#BC3603'
				}, {
					value : interest,
					color : '#F2B705'
				}, {
					value : 300,
					color : '#86AD00'
				}, {
					value : 50,
					color : '#0092B9'
				}],
			}, function(ret, err) {
				if (ret) {
					//alert(JSON.stringify(ret));
				} else {
					//alert(JSON.stringify(err));
				}
			});
		}

		function calcFinance() {
			var fin_result = document.querySelector('#fin_result');
			fin_result.style.display = "block";
			var month_income = parseInt(document.getElementById("month_income").value);
			var cash_saved = parseInt(document.getElementById("cash_saved").value);
			var life_budget = parseInt(document.getElementById("life_budget").value);
			var fix_expense = 7500;
			if (isNaN(month_income)) {
				month_income = 0;
			}
			if (isNaN(cash_saved)) {
				cash_saved = 0;
			}
			if (isNaN(life_budget)) {
				life_budget = 0;
			}
			var remain = month_income + cash_saved - life_budget - fix_expense;
			var fin_remain = document.querySelector('#fin_remain');
			fin_remain.textContent = remain + '元';
			var fin_problem = document.querySelector('#fin_problem');
			var fin_soso = document.querySelector('#fin_soso');
			var fin_good = document.querySelector('#fin_good');
			fin_problem.style.display = "none";
			fin_soso.style.display = "none";
			fin_good.style.display = "none";
			if (remain < 0) {
				fin_problem.style.display = "block";
			} else if (remain < 2000) {
				fin_soso.style.display = "block";
			} else {
				fin_good.style.display = "block";
			}
		}

		function loadLoanList(index) {
			var index_start = index;
			var end = index + 1;
			var loan_names = ["拍拍贷", "点融网", "你我贷", "中融投", "君融贷", "才米公社"];
			var loan_stats = [1.00, 1.13, 2.62, 0.78, 0.36, 0.72];
			var loan_limits = ["1万-5万", "1000-3000", "1万-2万", "5000-1万", "1万-3万", "1000-5000"];
			var loan_descs = ["10天快速放贷 仅需央行征信证明+身份证", "仅需身份证+芝麻信用，24小时快速放贷", '获政府认可金融平台 可投活期', '中国互联网金融协会常务理事单位', '永诚保险保障 注册再送100元微信红包', '花旗融资担保 资金独立保管'];
			var company_icons = ["paipai.jpg", "dianrong.jpg", "niwodai.jpg", "zhongrongtou.jpg", "junrongdai.jpg", "caimi.jpg"];
			for (var i = index_start; i < end; i++) {
				var icon = document.querySelector('#company_icon');
				icon.src = '../../image/company_icon/' + company_icons[i];
				var loan_name = document.querySelector('#loan_name');
				loan_name.textContent = loan_names[i];
				var loan_stat = document.querySelector('#loan_stat');
				loan_stat.textContent = '参考月利率:' + loan_stats[i].toFixed(2) + '%';
				var loan_limit = document.querySelector('#loan_limit');
				loan_limit.textContent = '可贷款额度:' + loan_limits[i] + '元';
				var loan_desc = document.querySelector('#loan_desc');
				loan_desc.innerHTML = loan_descs[i];
			}
		}

		function drawPieChart() {
			var pieChart = api.require('pieChart');
			var frameWidth = api.frameWidth;
			var totalLoan_h = $api.offset($api.byId('totalLoan')).t;
			var monthPay_h = $api.offset($api.byId('monthPay')).t;
			var monthFixExp_h = $api.offset($api.byId('monthFixExp')).t;
			/*
			 pieChart.open({
			 x : (frameWidth / 4) + (frameWidth / 32),
			 y : totalLoan_h + (frameWidth / 4) + (frameWidth / 32),
			 radius : frameWidth / 4,
			 center : {
			 title : '贷款',
			 subTitle : '分布图',
			 subTitleColor : '#000000',
			 titleSize : 11,
			 subTitleSize : 11
			 },
			 elements : [{
			 value : 40000,
			 color : '#BC3603'
			 }, {
			 value : 20000,
			 color : '#F2B705'
			 }, {
			 value : 10000,
			 color : '#86AD00'
			 }, {
			 value : 3000,
			 color : '#0092B9'
			 }],
			 fixedOn : api.frameName,
			 fixed : false
			 }, function(ret, err) {
			 if (ret) {
			 loanTotalID = ret.id;
			 //alert(JSON.stringify(ret));
			 } else {
			 //alert(JSON.stringify(err));
			 }
			 });*/
			pieChart.open({
				x : (frameWidth / 4) + (frameWidth / 32),
				y : monthPay_h + (frameWidth / 4) + (frameWidth / 32),
				radius : frameWidth / 4,
				center : {
					title : '本月还款',
					subTitle : '分布图',
					subTitleColor : '#000000',
					titleSize : 11,
					subTitleSize : 11
				},
				elements : [{
					value : 2000,
					color : '#BC3603'
				}, {
					value : 1500,
					color : '#F2B705'
				}, {
					value : 500,
					color : '#86AD00'
				}, {
					value : 800,
					color : '#0092B9'
				}],
				fixedOn : api.frameName,
				fixed : false
			}, function(ret, err) {
				if (ret) {
					monthPayID = ret.id;
					//alert(JSON.stringify(ret));
				} else {
					//alert(JSON.stringify(err));
				}
			});
			pieChart.open({
				x : (frameWidth / 4) + (frameWidth / 32),
				y : monthFixExp_h + (frameWidth / 4) + (frameWidth / 32),
				radius : frameWidth / 4,
				center : {
					title : '固定支出',
					subTitle : '分布图',
					subTitleColor : '#000000',
					titleSize : 11,
					subTitleSize : 11
				},
				elements : [{
					value : 4800,
					color : '#BC3603'
				}, {
					value : 1000,
					color : '#F2B705'
				}, {
					value : 1000,
					color : '#86AD00'
				}, {
					value : 200,
					color : '#0092B9'
				}, {
					value : 500,
					color : '#D97904'
				}],
				fixedOn : api.frameName,
				fixed : false
			}, function(ret, err) {
				if (ret) {
					monthPayID = ret.id;
					//alert(JSON.stringify(ret));
				} else {
					//alert(JSON.stringify(err));
				}
			});
		}

		apiready = function() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				api.refreshHeaderLoadDone();
			});
			api.parseTapmode();
			drawPieChart();
			showPayProgress();
		}
	</script>
</html>